<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/common-head.jsp"%>

<body>
    <!-- begin #content -->
    <div id="content" class="content content-full-width">
        <!-- begin profile -->
        <div class="profile">
            <div class="profile-header">
                <!-- BEGIN profile-header-cover -->
                <div class="profile-header-cover"></div>
                <!-- END profile-header-cover -->
                <!-- BEGIN profile-header-content -->
                <div class="profile-header-content">
                    <!-- BEGIN profile-header-img -->
                    <div class="profile-header-img">
                        <img src="${cdnServer}${user.photo}" alt="" id="userId" onclick="openPhoto()" width="114px">
                        <input type="file" name="file" id="file" style="display: none" onchange="uploadFile()">
                    </div>
                    <!-- END profile-header-img -->
                    <!-- BEGIN profile-header-info -->
                    <div class="profile-header-info">
                        <h4 class="mt-0 mb-1" >${user.userName}</h4>
                        <p class="mb-2">个人资料中心.</p>
                        <a href="${basePath}settings/editProfile" class="btn btn-xs btn-yellow">Edit Profile</a>
                    </div>
                    <!-- END profile-header-info -->
                </div>
                <!-- END profile-header-content -->
                <!-- BEGIN profile-header-tab -->
                <ul class="profile-header-tab nav nav-tabs">
                    <li class="nav-item"><a href="#profile-about" class="nav-link active" data-toggle="tab">ABOUT</a></li>
                </ul>
                <!-- END profile-header-tab -->
            </div>
        </div>
        <!-- end profile -->
        <!-- begin profile-content -->
        <div class="profile-content">
            <!-- begin tab-content -->
            <div class="tab-content p-0">
                <!-- begin #profile-about tab -->
                <div class="tab-pane fade show active" id="profile-about">
                    <!-- begin table -->
                    <div class="table-responsive form-inline">
                        <table class="table table-profile">
                            <thead>
                            <tr>
                                <td class="highlight"> </td>
                                <td>
                                    <h4 >${user.userName}</h4>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="highlight">
                                <td class="field">注册时间</td>
                                <td >${localDateTimeUtil.format(user.addTime,'yyyy-MM-dd HH:mm:ss')}</td>
                            </tr>
                            <tr class="divider">
                                <td colspan="2"></td>
                            </tr>
                            <tr>
                                <td class="field">密码</td>
                                <td >${user.password}</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <!-- end table -->
                </div>
                <!-- end #profile-about tab -->
            </div>
            <!-- end tab-content -->
        </div>
        <!-- end profile-content -->
    </div>


</body>

<%@include file="../common/common-script.jsp"%>

<script>
    var cdnServer = "${cdnServer}"
    function openPhoto(){
        $("#file").trigger("click")
    }

    function uploadFile(p){
        var formData=new FormData();
        formData.append("file",$('#file').prop('files')[0]);
        $.ajax({
            type:'POST',
            url:'/ServletUpload',
            data:formData,
            contentType: false,// 注意：让jQuery不要处理数据
            processData: false,// 注意：让jQuery不要设置contentType
            dataType:'json',
            success:function (res) {
                $("#userId").attr("src",cdnServer+res.path)
            }
        });

    }
</script>


</html>